<template>
  <div class="box">
    <div class="title">注册</div>
    <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish" size="large" :rules="rules">
      <a-form-item name="username">
        <a-input v-model:value="formState.username" placeholder="账号">
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input-password v-model:value="formState.password" placeholder="密码">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item name="comfirmPsd">
        <a-input-password v-model:value="formState.comfirmPsd" placeholder="确认密码">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-radio-group v-model:value="formState.isAdmin" button-style="solid" style="width: 100%;">
          <a-radio-button :value="false">普通用户</a-radio-button>
          <a-radio-button :value="true">管理员</a-radio-button>
        </a-radio-group>
      </a-form-item>
        <a-button type="primary" html-type="submit" class="submit_btn">立即注册</a-button>
        <div style="display: flex;justify-content: flex-end;">
          已有账号？<span style="color: #1677ff;cursor: pointer;" @click="loginUser">立即登录</span>
        </div>
    </a-form>
  </div>
</template>

<script>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import {
  UserOutlined,
  LockOutlined,
  GithubFilled,
  WechatFilled,
  AlipayCircleFilled,
  TaobaoCircleFilled,
  WeiboCircleFilled
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import md5 from 'md5-node';
import { register } from '@/apis/user/login';
export default {
  components: {
    UserOutlined,
    LockOutlined,
    GithubFilled,
    WechatFilled,
    AlipayCircleFilled,
    TaobaoCircleFilled,
    WeiboCircleFilled
  },
  emits: ['changeForm','go'],
  setup(props, { emit }) {
    const router = useRouter();


    const formState = ref({
      username: '',
      password: '',
      comfirmPsd:'',
      isAdmin:false
    });

    // 登录提交
    const onFinish = async () => {
      const sendFormData = {
        username: formState.value.username,
        password: md5(formState.value.password),
        isAdmin:formState.value.isAdmin,
      };
      try {
        const res = await register(sendFormData);
        if (res.code === 0) {
          message.success('注册成功！');
          loginUser();
        } else {
          message.error(res.message);
        }
      } catch (error) {
        message.error('登录失败');
      }
    };

    // 密码验证函数
    const validatePsd = (value) => {
      const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
      return reg.test(value);
    };

    // 表单验证规则
    const rules = {
      username: [{
        required: true,
        message: '请输入你的账号！',
      }],
      password: [
        { required: true, message: '请输入密码' },
        {
          validator: (_, value) => {
            if (!validatePsd(value)) {
              return Promise.reject('密码6-12位由数字和字母组成');
            }
            return Promise.resolve();
          }
        }
      ],
      comfirmPsd: [
        { required: true, message: '请再次输入密码' },
        {
          validator: (_, value) => {
            if (value !== formState.value.password) {
              return Promise.reject('两次输入密码不一致，请重新输入！');
            }
            return Promise.resolve();
          }
        }
      ]
    };

    function loginUser(){
      emit('go','login');
    }
    return {
      loginUser,
      formState,
      onFinish,
      rules,
      changeForm: (type) => emit('changeForm', type)
    };
  }
};
</script>

<style lang="less" scoped>
.box {
  padding: 40px 36px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  padding-bottom: 10px;
  font-weight: 700;
  font-size: 26px;
}



.submit_btn {
  width: 100%;
}
</style>